<template>
	<view class="flex flex-column background">

		<u--image :showLoading="true" :src="info.activityImage" mode="widthFix" width="100%" height="200px"
			@click="click"></u--image>

		<view class="flex flex-column padding ">
			<view class="box-shadow border-radius padding-bottom">
				<u--text color="black" size="20px" :text="info.activityName"></u--text>
				<u--text style="info" :text="info.activityDesc"></u--text>
				<u--text color="red" :text="info.activityPrice"></u--text>
				<!-- 地图 -->

				<view class="padding">
					<map style="width: 100%;" :layer-style='5' :show-location='true' :latitude="info.latitude"
						:longitude="info.longitude">
					</map>
				</view>
				<!-- 行前必读 -->
				
				<view class="flex flex-column margin-top">
					<u--text text="行前必读"  color="black" size="26px"></u--text>
					<u-cell title="退改政策" is-link />
					<u--text text="一境内旅游退改政策"></u--text>
					<u--text text="游客违约责任"></u--text>
					<u--text text="未确认订单可随时无损退出......"></u--text>
				</view>
				<view class="flex flex-column margin-top">
					<u-cell title="预定须知" is-link />
					<u--text text="一关于报名"></u--text>
					<u--text text="年龄:18-60岁可自行参加,其他年龄段参加活动需要家人陪同....."></u--text>
				</view>

				<view class="flex flex-column margin-top">
					<u-cell title="行前准备" is-link />
					<u--text text="自备物品：头灯、墨镜、冲锋衣、抓绒、羽绒服、排汗体恤、冲锋裤、睡袋、两顿路餐、袜子、登山鞋、保温杯、大背包（45L以上）、小背包（30L）、唇膏等。"></u--text>
				</view>



			</view>
		</view>
		<u-tabbar :value="value6" @change="name => value6 = name" :fixed="true" :placeholder="true"
			:safeAreaInsetBottom="true">
			<u-tabbar-item text="199$/人" icon="home"></u-tabbar-item>
			<u-tabbar-item></u-tabbar-item>
			<u-tabbar-item></u-tabbar-item>
			<u-tabbar-item @click="click1" :text="signUp" icon="account"></u-tabbar-item>
		</u-tabbar>





	</view>


</template>

<script>
	export default {

		data() {
			return {
				id: null,
				info: [],
				value6: 0,
				userId: null,
				signUp: '报名参加',
				src: "/static/images/index/slider2.jpg",
				markers: [{
					height: 35,
					width: 25,
					latitude: 30.110400,
					longitude: 118.188800,
					iconPath: '/static/images/my/map.png',
				}],
				list1: [{
					name: '关注',
				}, {
					name: '推荐',
				}, {
					name: '电影'
				}, {
					name: '科技'
				}]
			}
		},
		onLoad(option) {
			console.log(option.id)
			this.id = option.id
			this.getById(option.id)
			this.userId = uni.getStorageSync('userId');

		},
		methods: {
			getById(id) {
				uni.request({
					url: "http://localhost:8083/activityInfo/" + id,
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						console.log(res.data)
						this.info = res.data
					}
				});
			},
			change6(name) {
				console.log('click1', e);
			},
			//报名成功后跳转到我的订单页面
			click1(e) {
				console.log('click1', e);
				this.signUp = '已报名';
				// 收集订单信息
				const orderInfo = {
					userId: this.userId, // 假设用户ID为1，实际应用中应该根据用户登录信息获取
					activityId: this.id, // 活动ID，从页面加载时获取
					orderStatus: "待支付", // 订单状态
					totalMoney: this.info.activityPrice // 订单总金额
				};

				// 发送添加订单的请求
				uni.request({
					url: 'http://localhost:8083/orders', // 服务器接口地址
					method: 'POST', // 请求方法
					header: {
						'Content-Type': 'application/json' // 设置请求头，指定发送的数据格式为JSON
					},
					data: orderInfo, // 发送的数据
					success: (res) => {
						// 请求成功后的回调函数
						if (res.statusCode === 200) {
							console.log('订单添加成功', res.data);
							uni.showToast({
								title: '报名成功',
								icon: 'success'
							})
							// 报名成功后跳转到我的订单页面
							uni.navigateTo({
								url: '/pages/my/order/order'
							});
						} else {
							console.error('订单添加失败', res.data);
						}
					},
					fail: (err) => {
						// 请求失败的回调函数
						console.error('请求失败', err);
					}
				});
			}

		}
	}
</script>
<style>
	.footer {
		color: #fff;
		line-height: 100rpx;
		flex: 0 0 100rpx;
		/* 不放大不缩小固定100rpx */
	}
</style>